<template>
  <view class="question-container">
    <!-- 顶部进度条 -->
    <view class="progress-bar">
      <view class="progress-text">{{ currentIndex + 1 }}/{{ totalQuestions }}</view>
      <progress :percent="(currentIndex + 1) * 100 / totalQuestions" stroke-width="4" />
    </view>

    <!-- 题目内容 -->
    <view class="question-content">
      <view class="question-type" :class="{ 'important': question.isImportant }">
        <text class="type-tag">{{ getQuestionType }}</text>
      </view>
      <view class="question-text">{{ question.content }}</view>
    </view>

    <!-- 选项列表 -->
    <view class="options-list">
      <view
        v-for="(option, key) in question.options"
        :key="key"
        class="option-item"
        :class="{
          'selected': selectedAnswer === key,
          'correct': showResult && key === question.correct_answer,
          'wrong': showResult && selectedAnswer === key && selectedAnswer !== question.correct_answer
        }"
        @tap="selectAnswer(key)"
      >
        <text class="option-key">{{ key }}</text>
        <text class="option-text">{{ option }}</text>
      </view>
    </view>

    <!-- 解释内容 -->
    <view v-if="showResult && question.explanation" class="explanation">
      <view class="explanation-title">答案解释：</view>
      <text class="explanation-content">{{ question.explanation }}</text>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="button-group">
        <button 
          class="prev-btn" 
          :disabled="currentIndex === 0"
          @tap="prevQuestion"
        >上一题</button>
        <button 
          class="submit-btn" 
          :disabled="!selectedAnswer || showResult"
          @tap="submitAnswer"
        >{{ showResult ? '已提交' : '提交' }}</button>
        <button 
          class="next-btn" 
          :disabled="currentIndex === totalQuestions - 1"
          @tap="nextQuestion"
        >下一题</button>
      </view>
    </view>
  </view>
</template>

<script>
import { questionApi } from '@/services/api';

export default {
  data() {
    return {
      questions: [],
      currentIndex: 0,
      selectedAnswer: '',
      showResult: false,
      answers: {},  // 存储所有答题记录
      loading: false
    };
  },

  computed: {
    totalQuestions() {
      return this.questions.length;
    },
    question() {
      return this.questions[this.currentIndex] || {};
    },
    getQuestionType() {
      const types = {
        'single': '单选题',
        'multiple': '多选题',
        'judge': '判断题'
      };
      return types[this.question.question_type] || '未知类型';
    }
  },

  onLoad(options) {
    // 从本地存储获取题目数据
    const questions = uni.getStorageSync('currentQuestions');
    if (questions && questions.length > 0) {
      this.questions = questions;
    } else {
      uni.showToast({
        title: '题目加载失败',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  },

  methods: {
    selectAnswer(answer) {
      if (this.showResult) return;
      this.selectedAnswer = answer;
    },

    async submitAnswer() {
      if (!this.selectedAnswer || this.loading) return;

      try {
        this.loading = true;
        const result = await questionApi.checkAnswer(
          this.question.id,
          this.selectedAnswer
        );

        // 保存答题记录
        this.answers[this.question.id] = {
          selected: this.selectedAnswer,
          correct: result.correct
        };

        this.showResult = true;

        // 显示结果提示
        uni.showToast({
          title: result.correct ? '回答正确' : '回答错误',
          icon: result.correct ? 'success' : 'error',
          duration: 1500
        });

      } catch (error) {
        console.error('提交答案失败:', error);
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },

    prevQuestion() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.resetQuestion();
      }
    },

    nextQuestion() {
      if (this.currentIndex < this.totalQuestions - 1) {
        this.currentIndex++;
        this.resetQuestion();
      }
    },

    resetQuestion() {
      this.selectedAnswer = '';
      this.showResult = false;
      // 如果已经答过这题，显示历史答案
      const history = this.answers[this.question.id];
      if (history) {
        this.selectedAnswer = history.selected;
        this.showResult = true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.question-container {
  min-height: 100vh;
  padding: 30rpx;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
}

.progress-bar {
  margin-bottom: 30rpx;
  .progress-text {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;
  }
}

.question-content {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

  .question-type {
    margin-bottom: 20rpx;
    .type-tag {
      background: #e6f3ff;
      color: #1890ff;
      padding: 4rpx 16rpx;
      border-radius: 6rpx;
      font-size: 24rpx;
    }
    &.important .type-tag {
      background: #fff1f0;
      color: #ff4d4f;
    }
  }

  .question-text {
    font-size: 32rpx;
    color: #333;
    line-height: 1.6;
  }
}

.options-list {
  flex: 1;
  margin-bottom: 30rpx;

  .option-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

    &.selected {
      background: #e6f3ff;
      border: 2rpx solid #1890ff;
    }

    &.correct {
      background: #f6ffed;
      border: 2rpx solid #52c41a;
    }

    &.wrong {
      background: #fff1f0;
      border: 2rpx solid #ff4d4f;
    }

    .option-key {
      width: 60rpx;
      height: 60rpx;
      background: #f0f2f5;
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      color: #666;
      margin-right: 20rpx;
    }

    .option-text {
      flex: 1;
      font-size: 30rpx;
      color: #333;
      line-height: 1.5;
    }
  }
}

.explanation {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

  .explanation-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;
  }

  .explanation-content {
    font-size: 30rpx;
    color: #333;
    line-height: 1.6;
  }
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.1);

  .button-group {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;

    button {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      border-radius: 40rpx;

      &.prev-btn,
      &.next-btn {
        background: #f0f2f5;
        color: #666;

        &:disabled {
          opacity: 0.5;
        }
      }

      &.submit-btn {
        background: #1890ff;
        color: #fff;

        &:disabled {
          opacity: 0.5;
        }
      }
    }
  }
}
</style> 